<!-- template -->
<template>
  <v-layout>
    <v-app-bar title="JTYT Blog" scroll-behavior="inverted">
      <template v-slot:prepend>
        <v-app-bar-nav-icon>
          <i class="pi pi-home" style="color: slateblue"></i>
        </v-app-bar-nav-icon>
      </template>
      <template v-slot:append>
        <v-btn icon="mdi-dots-vertical" @click="showDrawer = !showDrawer">
          <OverlayBadge
            value="4"
            severity="danger"
            class="inline-flex"
            size="small"
          >
            <Avatar
              shape="circle"
              image="/src/assets/images/yh.jpg"
              size="middle"
            />
          </OverlayBadge>
        </v-btn>
      </template>
    </v-app-bar>
    <Drawer v-model="showDrawer" :close-on-content-click="false">
      <template v-slot:prepend>
        <v-img
          src="/src/assets/images/logo.png"
          max-width="100%"
          max-height="100%"
          alt="Logo"
        ></v-img>
      </template>
      <template v-slot:default>
        <ScrollMenu />
      </template>
      <template v-slot:append>
        <div class="d-flex flex-column align-items-center">
          <Button
            icon="pi pi-sign-out"
            class="flex-auto"
            severity="danger"
            text
          ></Button>
        </div>
      </template>
    </Drawer>

    <v-main>
      <router-view v-slot="{ Component }">
        <transition name="router-fade" mode="out-in">
          <keep-alive>
            <div>
              <component :is="Component" />
            </div>
          </keep-alive>
        </transition>
      </router-view>
    </v-main>
  </v-layout>
</template>
<!-- ts -->
<script setup lang="ts" name="LayDashboard">
import ScrollMenu from "./ScrollMenu.vue";

const showDrawer = ref(false);
</script>
<!-- style -->
<style lang="scss" scoped></style>
